<template>
    <div id="recommend"  :style="{backgroundColor: swipeColor[index]}">
      <v-touch v-on:swipeleft="swiperleft"  v-on:swiperight="swiperright" class="wrapper" style="touch-action: pan-y!important;">
        <!--搜索栏-->
        <div id="search-bar">
          <div  @click="search">
            <img src="../../../assets/imgs/homePage/放大镜.png" alt="">
            <input type="text" :placeholder="serchTxt">
          </div>
          <img class="time" src="../../../assets/imgs/homePage/time.png" alt="">
          <img class="time" src="../../../assets/imgs/homePage/calendar-minus.png" alt="">
        </div>
        <mt-swipe  @change="handleChange"  id="swipe" v-if="returnComic" :show-indicators="false" :auto="4000">
          <mt-swipe-item class="swipe-item" v-for="(item,index) in comic" :key="index">
            <img v-if="item.imgUrl" :src="item.imgUrl" alt="">
          </mt-swipe-item>
        </mt-swipe>
        <div class="comic-bar">
          <div class="comic-content" v-for="(item,index) in comic"  :key="index">
            <img v-if="item.imgUrl" :src="item.imgUrl" alt="">
            <div class="comic-tit">
              <p class="comic-name">{{item.name}}</p>
              <p class="comic-series">{{item.series[0]}}</p>
            </div>
            <div>
              <div class="comic-introduce">
                <p>
                  {{item.introduce}}
                </p>
                <div>
                  <img class="comment" src="../../../assets/imgs/homePage/评论-面.png" alt="">
                  {{item.comment}}
                  <img class="more" src="../../../assets/imgs/homePage/更多.png" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </v-touch>

    </div>
</template>

<script>
  import  axios from 'axios'
    export default {
        name: "Recommend",
      components: {

      },
      data(){
          return{
            serchTxt:'仙王的日常生活',
            comic:[],
            swipeColor:['#213771','#a28078','pink'],
            index:0
          }
      },
      created(){
          axios.get('../../static/json/home.json')
            .then(res =>{
              // console.log(res);
              this.comic = res.data.comic
            }).catch(err =>{
            console.log(err);
          })

      },
      computed:{
        returnComic(){
          return this.comic.length!=0? true:false
        }
      },
      methods:{
        search(){
          // console.log('1');
          this.$router.push({'path': '/search'})
        },
        swiperleft: function () {
          this.$router.push({'path': '/homePage/hot'});
        },
        swiperright: function () {
          // this.$router.push({'path': '/homePage/hot'});
        },
        handleChange(index) {
          this.index = index
          // console.log(index);
        }
      }
    }
</script>

<style lang="less" >
@import "../../../assets/css/homePage/recommend";
@import "../../../../node_modules/swiper/dist/css/swiper.min.css";
</style>
